<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>确认订单</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .addressTitle {
            height: 2rem;
            background: rgba(255, 255, 255, 1);
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(89, 87, 87, 1);
            line-height: 2rem;
            border-bottom: 0.01rem solid rgba(238, 238, 238, 1);
        }

        .left {
            margin-left: 0.4rem;
        }

        .name-mobile {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            background: rgba(255, 255, 255, 1);
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            height: 2rem;
            line-height: 2rem;
            vertical-align: center;
        }

        .name-mobile .mobile {
            margin-right: 1rem;
        }

        .address-choose {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            background: rgba(255, 255, 255, 1);
            font-size: 0.4rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            height: 3rem;
            padding-top: 0.5rem;
        }

        .address-choose .address {
            margin-left: 0.4rem;
            font-size: 0.4rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }

        .goods-info-title {
            margin-top: 0.5rem;
            padding-left: 0.5rem;
            height: 2rem;
            background: rgba(255, 255, 255, 1);
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(89, 87, 87, 1);
            line-height: 2rem;
            border-bottom: 0.01rem solid rgba(238, 238, 238, 1);
        }

        .goodsInfo {
            display: -webkit-flex;
            display: flex;
            height: 5rem;
            background: rgba(255, 255, 255, 1);
            padding: 0.5rem;
            border-bottom: 0.05rem solid rgba(238, 238, 238, 1);
        }

        .goodsImg {
            height: 5rem;
            width: 5rem;
            text-align: center;
        }

        .goodsImg img {
            margin-right: 0.4rem;
            height: 3.5rem;
            width: 3.5rem;
        }

        .goods-detail {
            display: -webkit-box;
            display: flex;
            flex-direction: column;
        }

        .goods-name {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            width: 13.2rem;
        }

        .price-num {
            display: -webkit-box;
            display: flex;
            justify-content: space-between;
            margin-top: 0.3rem;
        }

        .price .sale-price {
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(231, 56, 12, 1);
        }

        .price .org-price {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            margin-left: 1rem;
        }

        .price-num .num {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
        }

        .total-price {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            height: 2.5rem;
            background: rgba(255, 255, 255, 1);
            line-height: 2.5rem;
            vertical-align: center;
        }

        .total-price .total-title {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(89, 87, 87, 1);
        }

        .total-price .total-amount {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(232, 57, 13, 1);
        }

        .pay-method {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            padding: 0.5rem;
            height: 2.2rem;
            background: rgba(255, 255, 255, 1);
            vertical-align: center;
            margin-top: 1rem;
        }

        .pay-method .method-title {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(89, 87, 87, 1);
        }

        .pay-method .pay-desc {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .pay-desc img {
            width: 1rem;
            height: 1rem;
        }

        .pay-desc .pay-name {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(47, 39, 37, 1);
        }

        .footerOpt {
            display: flex;
            flex-direction: row;
            height: 2.5rem;
            width: 100%;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0rem 0rem 3rem rgba(229, 229, 229, 0.78);
            justify-content: flex-end;
            position: fixed;
            bottom: 2.5rem;
        }

        .settleBtn {
            width: 6rem;
            height: 2.5rem;
            background: rgba(255, 147, 38, 1);
            text-align: center;
            font-size: 0.75rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 1);
            vertical-align: center;
            line-height: 2.5rem;
        }

        .showPrice {
            font-size: 0.75rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        .showPrice .tempPrice {
            width: 2.525rem;
            height: 0.65rem;
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
            line-height: 1.5rem;
        }

        .fare {
            width: 2.4rem;
            height: 0.6rem;
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            line-height: 1rem;
            text-align: center;
        }

        .optPrice {
            margin-right: 1rem;
        }
    </style>
</head>

<body>
<!-- 你的html代码 -->
<div class="page">
    <!--<header class="bar bar-nav">-->
        <!--<a class="button button-link button-nav pull-left" data-transition='slide-out'>-->
            <!--<span class="icon icon-left"></span>-->
            <!--返回-->
        <!--</a>-->
        <!--<h1 class="title">确认订单</h1>-->
    <!--</header>-->
    <nav class="bar bar-tab">
        <a class="tab-item active" href="../index.html">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" href="../category.html">
            <span class="icon icon-menu"></span>
            <span class="tab-label">分类</span>
        </a>
        <a class="tab-item" href="../cart.html">
            <span class="icon icon-cart"></span>
            <span class="tab-label">购物车</span>
        </a>
        <a class="tab-item" href="../personal.html">
            <span class="icon icon-me"></span>
            <span class="tab-label">我的</span>
        </a>
    </nav>
    <!-- 这里是页面内容区 -->
    <div class="content">
        <div class="addressInfo">
            <div class="addressTitle">
                    <span class="left">收货人信息
                        </span>
            </div>
        </div>
        <div class="addressDetail" onclick="jumpAddressPage()">
            <div class="name-mobile">
                <div class="name">
                    <span class="left">联系人: 袁飞龙</span>
                </div>
                <div class="mobile">13705042528</div>
            </div>
            <div class="address-choose">
                <div class="address">
                    联系地址: 福建省 福州市 金山橘园洲工业区台江园20号四楼诺邦畅想公司
                </div>
                <span class="icon icon-right"></span>
            </div>
        </div>

        <div class="goods-info-title">
            商品信息
        </div>
        <div id="goods-container">
            <div class="goodsInfo">
                <div class="goodsImg">
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                    />
                </div>
                <div class="goods-detail">
                    <div class="goods-name">邦顿手
                    </div>
                    <div class="price-num">
                        <div class="price">
                            <span class="sale-price">¥385</span>
                            <span class="org-price">¥799.00</span>
                        </div>
                        <div class="num">X1</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="total-price">
            <div class="total-title">购物合计总金额</div>
            <div class="total-amount">￥385.00</div>
        </div>
        <div class="pay-method">
            <div class="method-title">支付方式</div>
            <div class="pay-desc">
                <img src="../image/weixin_pay_icon.png"/>&nbsp;
                <span class="pay-name">微信支付</span>
            </div>
        </div>

        <div class="footerOpt">
            <div class="optPrice">
                <div class="showPrice">
                    合计:
                    <span class="tempPrice">￥754.00</span>
                </div>
                <div class="fare">
                    不含运费
                </div>
            </div>
            <div class="settleBtn" onclick="createOrder();">
                结算(2)
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://res.wx.qq.com/open/js/jweixin-1.2.0.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
</body>
<script>
    var userId;
    var addressId;
    $(function () {
        addressId = location.search.split("=")[1];
        if (addressId == "null") {
            loadAddress();
        } else {
            loadAddressById(addressId);
        }
        loadCart();
        var url = encodeURIComponent(location.href.split('#')[0]);
        $.getJSON("/wx/api/getJsApi?url=" + url, function (data) {
            appId = data.data.appId;
            nonceStr = data.data.nonceStr;
            signature = data.data.signature;
            timestamp = data.data.timestamp;

            wx.config({
                //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名
                jsApiList: ['getLocation', 'chooseWXPay'] // 必填，需要使用的JS接口列表
            });
        });
    });

    function jumpAddressPage() {
        window.location.href = "./myAddress.html?source=select"
    }

    /**
     * 结算
     */
    function createOrder() {
        $.post(prefix + "/orderInfo/api/generalOrder", {
            'userId': userId,
            'addressId': addressId
        }, function (data) {
            if (data.code == 0) {
                $.post(prefix + "/orderInfo/api/orderPayment", {
                    'orderId': data.data.flId
                }, function (data) {
                    if (data.code == 0) {
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId": data.data.appId, //公众号名称，由商户传入
                                "timeStamp": data.data.timeStamp, //时间戳，自1970年以来的秒数
                                "nonceStr": data.data.nonceStr, //随机串
                                "package": data.data.package,
                                "signType": data.data.signType, //微信签名方式：
                                "paySign": data.data.sign //微信签名
                            },
                            function (res) {
                                //                    get_brand_wcpay_request:ok	支付成功
                                //                    get_brand_wcpay_request:cancel	支付过程中用户取消
                                //                    get_brand_wcpay_request:fail	支付失败
                                //                    调用支付JSAPI缺少参数：total_fee	请检查预支付会话标识prepay_id是否已失效
                                if (res.err_msg === "get_brand_wcpay_request:ok") {
                                    $.alert("支付成功");
                                    window.location.href = "../index.html?q=paySuccess";
                                } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
                                    $.alert("取消支付");
                                } else if (res.err_msg === "get_brand_wcpay_request:fail") {
                                    $.alert("支付失败");
                                }

                            });
                    }
                });
            }
        });
    }

    /**
     * 加载默认地址
     */
    function loadAddress() {
        $.getJSON(prefix + "/userAddress/api/getAddressByUserId", function (data) {
            var addressList = data.data;
            var addressHtml = "";
            if (data.code == 0) {
                $.each(addressList, function (index, item) {
                    if (item.flIsDefault == 1) {
                        addressId = item.flId;
                        addressHtml += '<div class="name-mobile">' +
                            '<div class="name">' +
                            '<span class="left">联系人: ' + item.flName + '</span>' +
                            '</div>' +
                            '<div class="mobile">' + item.flPhone + '</div>' +
                            '</div>' +
                            '<div class="address-choose">' +
                            '<div class="address">' +
                            '联系地址: ' + item.flProvince + item.flCity + item.flArea + item.flDetailAddr +
                            '</div>' +
                            '<span class="icon icon-right"></span>' +
                            '</div>';
                    }
                });
            }
            if (addressHtml != "") {
                $(".addressDetail").html(addressHtml);
            } else {
                window.location.href = "./myAddress.html?source=select";
            }
        });
    }

    function loadAddressById(addressId) {
        $.getJSON(prefix + "/userAddress/api/getAddressById/" + addressId, function (data) {
            var address = data.data;
            var addressHtml = "";
            if (data.code == 0) {
                addressId = address.flId;
                addressHtml += '<div class="name-mobile">' +
                    '<div class="name">' +
                    '<span class="left">联系人: ' + address.flName + '</span>' +
                    '</div>' +
                    '<div class="mobile">' + address.flPhone + '</div>' +
                    '</div>' +
                    '<div class="address-choose">' +
                    '<div class="address">' +
                    '联系地址: ' + address.flProvince + address.flCity + address.flArea + address.flDetailAddr +
                    '</div>' +
                    '<span class="icon icon-right"></span>' +
                    '</div>';
            }
            $(".addressDetail").html(addressHtml);

        });

    }

    /**
     * 加载购物车信息
     */
    function loadCart() {
        $.getJSON(prefix + "/userCart/api/getUserCart", function (data) {
            var cartList = data.userCartList;
            var cartItemHtml = "";
            var size = 0;
            if (data.code == 0) {
                $(".total-amount").text('￥' + data.cartSubTotal);
                $(".showPrice .tempPrice").text("￥" + data.cartSubTotal);
                $.each(cartList, function (index, item) {
                    cartItemHtml += '<div class="goodsInfo">' +
                        '<div class="goodsImg">' +
                        '<img src="' + item.flThumbnail + '"/>' +
                        '</div>' +
                        '<div class="goods-detail">' +
                        '<div class="goods-name"> ' + item.flName + '' +
                        '</div>' +
                        '<div class="price-num">' +
                        '<div class="price">' +
                        '<span class="sale-price">¥' + item.flPrice + '</span>' +
                        '<span class="org-price">¥' + item.flOriginPrice + '</span>' +
                        '</div>' +
                        '<div class="num">X' + item.flQuantity + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                });
                $("#goods-container").html(cartItemHtml);
            }
        });
    }
</script>

</html>
